<template>
  <div class="detail-middle">
    <!--左课程信息-->
    <el-tabs type="border-card" stretch>
      <el-tab-pane>
        <span slot="label" class="title">课程介绍</span>
        <remark :remark="course.remark" />
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" class="title">课程目录</span>
        <class-time-info v-for="(item, index) in course.classTime" :key="item.id" :class-time="item" :index="index" />
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" class="title">学生评价</span>
        <!--有问题-->
        <evaluate-info v-for="item in evaluate" :key="item.id" :evaluate="item" />
      </el-tab-pane>
    </el-tabs>
    <!--右教师介绍-->
    <div>
      <teacher-info v-for="item in teacher" :key="item.id" :teacher="item" />
    </div>
  </div>
</template>

<script>
import { getTeacherByCourseId } from '@/api/teacher'
import { getEvaluateByCourseId } from '@/api/evaluate'
import settings from '@/settings'
import { parseTime } from '@/utils'
import Remark from './Remark'
import ClassTimeInfo from './ClassTimeInfo'
import EvaluateInfo from './EvaluateInfo'
import TeacherInfo from './TeacherInfo'

export default {
  name: 'Describe',
  components: { Remark, ClassTimeInfo, EvaluateInfo, TeacherInfo },
  props: {
    course: {
      required: true,
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      courseId: undefined,
      settings,
      // 教师列表
      teacher: [],
      // 评论列表
      evaluate: []
    }
  },
  created() {
    this.courseId = this.$route.query.csId
    this.getTeacherList()
    this.getEvaluateList()
  },
  methods: {
    // 格式化时间
    parseTime(time, format) {
      if (format == null || format === '') {
        return parseTime(time)
      }
      return parseTime(time, format)
    },
    // 根据课程id获取课程教师信息
    getTeacherList() {
      getTeacherByCourseId(this.courseId).then(res => {
        this.teacher = res.data
      })
    },
    // 根据课程id获取评论信息
    getEvaluateList() {
      getEvaluateByCourseId(this.courseId).then(res => {
        this.evaluate = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-middle {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
.el-tabs {
  width: 770px;
  margin-right: 20px;
.title {
  color: #2ac06d;
  width: 100px;
}

}

}
</style>
